﻿import QtQuick 2.9
import QtQuick.Controls 2.9
import QtQuick.Controls.Basic
import QtQuick.Layouts

Rectangle {
    anchors.fill: parent
    ScrollView {
        anchors.fill: parent
        background: Rectangle {
            anchors.fill: parent
            color: "#dfffef" // "#f2f2f2"
            radius: 8

            MouseArea {
                id: mouseArea_outside
                anchors.fill: parent
                hoverEnabled: true
                propagateComposedEvents: true
                onEntered: {
                    // console.log("ScrollView onEntered")
                    rect_clearButton.state = "show"
                }
                onExited: {
                    // console.log("ScrollView onExited")
                    // When the mouse enters the clear button, it will send a MouseExited signal.
                    //    When receiving the signal, it is necessary to determine whether the button is Entered.
                    if (rect_clearButton_inside.state === "MouseEntered") {
                    } else {
                        rect_clearButton.state = "hide"
                    }
                }
                onClicked: (mouse)=> {
                    mouse.accepted = false
                }
            }
        }
        TextArea {
            id: textArea_logs
            anchors.fill: parent
            color: "#595959"
        }
    }

    Connections {
        target: mQmlLogsBrowserService
        function onPushLogsToQml(s) {
            textArea_logs.append(s)
            textArea_logs.cursorPosition = textArea_logs.length
        }
    }

    Rectangle {
        id: rect_clearButton
        width: 100
        height: 30
        x: parent.width - width - 15
        y: 5
        radius: 8

        Rectangle {
            id: rect_clearButton_inside
            anchors.fill: parent
            radius: parent.radius
            color: "white"
            border.color: "white"
            border.width: 2
            state: "MouseExited"
            states: [
                State {
                    name: "MouseEntered"
                    PropertyChanges {
                        target: rect_clearButton_inside
                        border.color: "#86dbce"
                    }
                },
                State {
                    name: "MouseExited"
                    PropertyChanges {
                        target: rect_clearButton_inside
                        border.color: "white"
                    }
                }
            ]
            transitions: [
                Transition {
                    PropertyAnimation {
                        property: "border.color"
                        duration: 200
                    }
                },
                Transition {
                    PropertyAnimation {
                        property: "border.color"
                        duration: 200
                    }
                }
            ]

            Text {
                anchors.centerIn: parent
                text: "Clear"
                color: "#595959"
                font.family: "Comic Sans MS"
            }

            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                propagateComposedEvents: true
                hoverEnabled: true
                onEntered: {
                    // console.log("rect_clearButton_inside onEntered")
                    rect_clearButton_inside.state = "MouseEntered"
                }
                onExited: {
                    // console.log("rect_clearButton_inside onExited")
                    rect_clearButton_inside.state = "MouseExited"
                }
                onPressedChanged: {
                    rect_clearButton_inside.color =  pressed ? "#dfffef" : "white"
                    if (pressed === false) {
                        textArea_logs.clear()
                    }
                }
            }
        }

        state: "hide"
        states: [
            State {
                name: "show"
                PropertyChanges {
                    target: rect_clearButton
                    opacity: 1.0
                }
            },
            State {
                name: "hide"
                PropertyChanges {
                    target: rect_clearButton
                    opacity: 0.0
                }
            }
        ]
        transitions: [
            Transition {
                PropertyAnimation {
                    property: "opacity"
                    duration: 100
                }
            },
            Transition {
                PropertyAnimation {
                    property: "opacity"
                    duration: 100
                }
            }
        ]
    }
}
